<template>
  <div class="app-container customer-div purchaseRelationList-div">

    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="采购日期：">
          <el-date-picker
                  v-model="listQuery.orderDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购订单号：">
          <el-input v-model="listQuery.orderSn" clearable></el-input>
        </el-form-item>

        <el-form-item label="采购员：">
          <el-select v-model="listQuery.chargeUserId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in purchaseOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商：">
          <el-select
            clearable
            v-model="listQuery.supplierId"
            filterable
            reserve-keyword
            placeholder="请输入关键词"
            style="width: 220px;">
            <el-option
              v-for="item in options2"
              :key="item.supplierId"
              :label="item.supplierName"
              :value="item.supplierId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
                prop="orderSn"
                label="采购订单号"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
                prop="supplierName"
                label="供应商"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
               align="center"
                prop="chargeName"
                label="负责人"
                width="100">
        </el-table-column>
        <el-table-column
                prop="orderDate"
                label="采购订单日期"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
               show-overflow-tooltip
               align="center"
                prop="orderPayStr"
                label="付款时间与金额"
                width="180">
        </el-table-column>
        <el-table-column
                align="center"
                prop="paidAmount"
                label="已付金额"
                width="100">
        </el-table-column>
        <el-table-column
                prop="unPaidAmount"
                label="未付金额"
                align="center"
                width="100">
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                prop="goodsSn"
                label="商品信息"
                align="center"
                width="300">
           <template slot-scope="scope">
             <div class="tdDiv" v-for="(item,index) in scope.row.ordGoodsList" :style="{'line-height': sumHeight(item,1),'height':sumHeight(item,1)}"  style="border-bottom: 1px solid #EBEEF5">
               <el-tooltip class="item" effect="dark" :content="item.goodsSn" placement="bottom">
                 <span>{{item.goodsSn}}</span>
               </el-tooltip>
             </div>
             <div class="tdDiv" style="font-weight: bold">汇总（单采购单）</div>
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                prop="goodsPrice"
                label="合同单价"
                align="center"
                width="100">
          <template slot-scope="scope">
            <div  class="tdDiv" v-for="(item,index) in scope.row.ordGoodsList" :style="{'line-height': sumHeight(item,1),'height':sumHeight(item,1)}"  style="border-bottom: 1px solid #EBEEF5">{{item.goodsPrice}}</div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row |  fifsum(1,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
                prop="goodsNum"
                label="合同数量"
                align="center"
                width="180">
          <template slot-scope="scope">
            <div  class="tdDiv" v-for="(item,index) in scope.row.ordGoodsList" :style="{'line-height': sumHeight(item,1),'height':sumHeight(item,1)}"  style="border-bottom: 1px solid #EBEEF5">{{item.goodsNum}}</div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(1,'goodsNum','key')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
                prop="goodsUnInNum"
                label="未入库数量"
                align="center"
                width="100">
          <template slot-scope="scope">
            <div  class="tdDiv" v-for="(item,index) in scope.row.ordGoodsList" :style="{'line-height': sumHeight(item,1),'height':sumHeight(item,1)}"  style="border-bottom: 1px solid #EBEEF5">{{item.goodsUnInNum}}</div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(1,'goodsUnInNum','key')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
                prop="goodsUnShipNum"
                label="未出库数量"
                align="center"
                width="130">
          <template slot-scope="scope">
            <div  class="tdDiv" v-for="(item,index) in scope.row.ordGoodsList" :style="{'line-height': sumHeight(item,1),'height':sumHeight(item,1)}" style="border-bottom: 1px solid #EBEEF5">{{item.goodsUnShipNum}}</div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(1,'goodsUnShipNum','key')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
                prop="entrySn"
                label="对应入库单号"
                align="center"
                width="150">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
               <div  class="tdDiv" v-for="(ee,ii) in item.entryList" :style="{'line-height': sumHeight(ee,2),'height':sumHeight(ee,2)}" style="border-bottom: 1px solid #EBEEF5">{{ee.entrySn}}</div>
               <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>

            <div class="tdDiv" style="font-weight: bold">{{scope.row |  fifsum(2,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
                prop="entryDate"
                label="入库时间"
                align="center"
                width="150">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div  class="tdDiv" v-for="(ee,ii) in item.entryList"  :style="{'line-height': sumHeight(ee,2),'height':sumHeight(ee,2)}" style="border-bottom: 1px solid #EBEEF5">{{ee.entryDate}}</div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row |  fifsum(2,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
                prop="entryGoodsNum"
                label="入库数量"
                align="center"
                width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div  class="tdDiv" v-for="(ee,ii) in item.entryList"  :style="{'line-height': sumHeight(ee,2),'height':sumHeight(ee,2)}" style="border-bottom: 1px solid #EBEEF5">{{ee.entryGoodsNum}}</div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(2,'entryGoodsNum','key')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="diffDayNum"
          label="入库相隔天数"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div  class="tdDiv" v-for="(ee,ii) in item.entryList"  :style="{'line-height': sumHeight(ee,2),'height':sumHeight(ee,2)}" style="border-bottom: 1px solid #EBEEF5">
                <span :style="{color:ee.diffDayNum>7 ? 'red' : '#606266'}">{{ee.diffDayNum}}</span>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(2,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="deliverSn"
          label="对应出库单号"
          align="center"
          width="150">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.deliverSn}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="deliverDate"
          label="出库时间"
          align="center"
          width="150">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.deliverDate}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="shipNum"
          label="出库数量"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.shipNum}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'shipNum','key')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="diffDayNum"
          label="出库相隔天数"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">
                  <span :style="{color:eee.diffDayNum>7 ? 'red' : '#606266'}">{{eee.diffDayNum}}</span>
                </div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="orderSn"
          label="对应销售订单号"
          align="center"
          width="150">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.orderSn}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="needPayAmount"
          label="应收金额"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.needPayAmount}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="paidAmount"
          label="已收金额"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.paidAmount}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="unPaidAmount"
          label="未收金额"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.unPaidAmount}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="customerName"
          label="客户抬头"
          align="center"
          width="300">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">
                  <el-tooltip class="item" effect="dark" :content="eee.customerName" placement="bottom">
                    <span>{{eee.customerName}}</span>
                  </el-tooltip>
                </div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" v-if="item.entryList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class-name="cspantd"
          prop="purchaseOrderRelation"
          label="采购订单关联"
          align="center"
          width="100">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.ordGoodsList" >
              <div v-for="(ee,ii) in item.entryList" >
                <div  class="tdDiv" v-for="(eee,iii) in ee.deliverList"  style="border-bottom: 1px solid #EBEEF5">{{eee.purchaseOrderRelation}}</div>
                <div  class="tdDiv" v-if="ee.deliverList.length == 0" style="border-bottom: 1px solid #EBEEF5"></div>
              </div>
              <div  class="tdDiv" style="border-bottom: 1px solid #EBEEF5"  v-if="item.entryList.length == 0"></div>
            </div>
            <div class="tdDiv" style="font-weight: bold">{{scope.row | fifsum(3,'','null')}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

  </div>
</template>

<script>
const defaultListQuery = {
  "orderSn" : "", //采购订单号
  "supplierId" : '',//供应商ID
  "orderDate" : [],//采购日期
  "chargeUserId" : '',//采购员ID
  "pageNum":1,
  "pageSize":10
};
    import { supplierList,purchaseRelationList,getOrderUsersList} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'

    export default {
        name: "purchaseRelationList",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
                list:[],
                count:0,
                loading:false,
                options2:[],
                purchaseOptionList:[]
            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),


        },
        created() {
          let now = new Date();
          let nowMonth = now.getMonth(); //当前月
          let nowYear = now.getFullYear(); //当前年
          //本月的开始时间
          let monthStartDate = new Date(nowYear, nowMonth, 1);
          //本月的结束时间
          let monthEndDate = new Date(nowYear, nowMonth+1, 0,23,59,59);
          let startDate = formatDate(monthStartDate, 'yyyy-MM-dd');
          let endDate = formatDate(monthEndDate, 'yyyy-MM-dd');
          this.listQuery.orderDate = [startDate,endDate];
          this.getListData();
          this.getSupplierList()
          this.getUserOptionList();
        },
        filters: {
            fifsum(row,type,key,tab) {
              let sum = 0
              let num = 0
              if(type==1){
                row.ordGoodsList.forEach((el)=>{
                  sum = el[key] ? sum + el[key] : sum
                  num = num + 1
                })
              }else if(type==2){
                row.ordGoodsList.forEach((el)=>{
                  el.entryList.forEach((ee)=>{
                    sum = ee[key] ? sum + ee[key] : sum
                    num = num + 1
                  })
                })
              }else if(type==3){
                row.ordGoodsList.forEach((el)=>{
                  el.entryList.forEach((ee)=>{
                    ee.deliverList.forEach((eee)=>{
                      sum = eee[key] ? sum + eee[key] : sum
                      num = num + 1
                    })
                  })
                })
              }
              if(tab == 'key'){
                return num > 0 ? sum.toFixed(2) : ' '
              }else if(tab == 'null'){
                return num > 0 ? '/' : ' '
              }
            },

        },
        methods:{
          sumHeight(row,type){
            let num = 0
            if(type == 1){
                row.entryList.forEach((ee)=>{
                  if(ee.deliverList.length == 0){
                    num = num + 1
                  }else{
                    ee.deliverList.forEach((eee)=>{
                      num = num + 1
                    })
                  }

                })
            }else if(type == 2){
                  row.deliverList.forEach((eee)=>{
                    num = num + 1
                  })
            }
            return num > 0 ? num*37-1+'px' : '36px'
          },
          getUserOptionList(){
            getOrderUsersList({
              departmentType: "purchase"
            }).then((res)=>{
              this.purchaseOptionList = res;
            })
          },

          //供应商
          getSupplierList() {
            supplierList().then((res)=>{
              this.options2 = res;
            })
          },
            handleSearchList(){
                this.listQuery.pageNum = 1;
                this.getListData();
            },

            handleSizeChange(val){
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getListData();
            },
            handleCurrentChange(val){
                this.listQuery.pageNum = val;
                this.getListData();
            },

            getListData(){
              this.loading = true;
              purchaseRelationList(this.listQuery).then((res)=>{
                this.list =  res.list
                this.count = res.count;
                this.loading = false;
              }).catch(()=>{
                this.loading = false;
              })
            },

        },
    }
</script>


<style lang="scss">
.purchaseRelationList-div .el-table td.cspantd{
  padding:0 !important;
  .cell{
    padding:0 !important;
    .tdDiv{
      min-height: 36px;
      line-height: 36px;
      box-sizing: content-box;
      text-align: center;
      padding:0 10px;
    }
  }
}
</style>
